<template>
	<view class="container">
		<!-- 无网络提示 -->
		<u-no-network></u-no-network>
		
		<view class="item">
			<u--image :src="tipIcon" width="300rpx" height="300rpx" :fade="false"></u--image>
		</view>
		<view class="item title">抱歉，服务器连接异常</view>
		<view class="item button">
			<view class="btn">
				<u-button type="error" text="返回首页" shape="circle" plain @click="onJump('/pages/index/index')">
				</u-button>
			</view>
			<view class="btn">
				<u-button type="error" text="刷新重试" shape="circle" @click="navigateBack"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tipIcon: this.$base.ossUrl + "defaultPage/network.png",
			};
		},
		methods: {
			onJump(url) {
				uni.reLaunch({
					url
				})
			},
			navigateBack() {
				let pages = getCurrentPages();
				let beforePage = "/" + pages[pages.length - 2].route;
				if (beforePage == '/pages/index/index' || beforePage == '/pages/goods/category' || beforePage ==
					'/pages/cart/index' || beforePage == '/pages/my/index') {
					uni.reLaunch({
						url: beforePage
					});
				} else {
					uni.redirectTo({
						url: beforePage
					});
				}
			}
		}
	}
</script>
<style lang="scss">
	.container {
		padding-top: 250rpx;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;

			&.title {
				font-size: 28rpx;
			}

			&.info {
				font-size: 22rpx;
				color: #CCCCCC;
			}

			&.button {
				width: 70%;
				margin: 0px auto;
				padding-top: 30rpx;

				.btn {
					flex: 1;

					&:last-child {
						margin-left: 30rpx;
					}
				}
			}
		}
	}
</style>
